<template>
  <div class="app" id="couponDetails">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>体检报告</h3>
            </div>
            <div class="yuansdj">
              <img style="width:150px;height:150px" src="@/assets/img/aa.png" alt />
              <div>{{titles}}</div>
              <div class="rates">
                <div style="display:flex">
                  <span>综合评分</span>
                  <el-rate v-model="ratee" disabled></el-rate>
                  <span style="color:#ff9900">{{valus}}分</span>
                </div>
                <el-button size="small" @click="remind">提现使用</el-button>
              </div>
              <div class="lefts">综合评价</div>
              <div class="rights">{{evaluate}}</div>
              <div class="lefts">改进意见</div>
              <div class="rights">{{opinion}}</div>
              <img src="@/assets/img/aa.png" alt />
            </div>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      titles: "活动标题",
      ratee: 4,
      valus: null,
      evaluate:
        "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案。。。。。。",
      opinion:
        "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案"
    };
  },
  mounted() {
    this.valus = this.ratee * 2;
  },
  methods: {
      remind(){
          this.$message({
          message: '提醒成功',
          type: 'success'
        });
      }
  }
};
</script>
<style scoped lang="stylus">
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

#couponDetails {
  .back {
    background-color: #f06048;
  }

  .pxes {
    height: 15px;
  }

  .back .con {
    width: 1200px;
    margin: 0 auto;
    background-color: #eee;
    padding-bottom: 10px;
  }

  .listneo {
    width: 1161px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
  }

  .conres {
    width: 902px;
    border-radius: 6px;
    background-color: #fff;
  }

  .conres .ra h3 {
    font-size: 20px;
    color: #f06048;
    padding-left: 14px;
    margin-top: 15px;
    padding-bottom: 10px;
    text-align: center;
  }

  .yuansdj {
    width: 95%;
    margin: 35px auto;
  }

  .rates {
    display: flex;
    justify-content: space-between;
    margin-top 10px
  }

  .lefts {
    width: 80px;
    margin: 10px 0px;
  }

  .rights {
    margin: 10px 0px 10px 80px;
  }
}
</style>